@import "../../common/css/mixin";

body {
  width: 100%;
  height: 100%;
  font-family: "Microsoft YaHei UI";
  background-color: #db2f3f;
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.main{
  text-align: center;
}
.header {
  .picture {
    display: inline-block;
    @include bg-image('../img/banner');
    @include px2rem(background-size, 750);
    @include px2rem(height, 400);
    @include px2rem(width, 750);
    background-repeat: no-repeat;
  }
}

.article {
  .picture {
    display: inline-block;
    @include bg-image('../img/banner2');
    @include px2rem(background-size, 536);
    @include px2rem(height, 86);
    @include px2rem(width, 536);
    background-repeat: no-repeat;
  }
}

.section {
  @include px2rem(padding-top, 15);
  position: -webkit-sticky;
  position: sticky;
  @include px2rem(bottom, 265);
  .title-wrapper {
    text-align: center;
    color: #fdf298;
    @include font-dpr(14px);
    @include px2rem(letter-spacing, 2);

    .title {
      @include px2rem(margin-left, -90);
      width: 125%;
      transform: scaleX(0.8);
      -webkit-transform: scaleX(0.8);
    }
  }

  .picture-wrapper {
    @include px2rem(padding-top, 15);

    .picture {
      display: inline-block;
      @include bg-image('../img/banner3');
      @include px2rem(background-size, 621);
      @include px2rem(height, 168);
      @include px2rem(width, 621);
      background-repeat: no-repeat;
    }
  }

  .banner {
    display: flex;
    justify-content: space-between;
    @include px2rem(padding-left, 60);
    @include px2rem(padding-right, 60);
    @include px2rem(padding-top, 5);
    text-align: center;

    .awart {
      display: inline-block;
      vertical-align: middle;
      @include px2rem(width, 193);
      @include px2rem(height, 64);
      @include px2rem(line-height, 64);
      @include font-dpr(14px);
      color: #fff39b;

      .name {
        transform: scaleX(0.9);
        -webkit-transform: scaleX(0.9);
        white-space: nowrap;
      }
    }

    .height {
      .name {
        @include px2rem(height, 32);
        @include px2rem(line-height, 32);

        &:last-child {
          @include px2rem(padding-top, 5);
        }
      }
    }
  }
}

.footer {
  @include px2rem(margin-top, 100);
  position: -webkit-sticky;
  position: sticky;
  bottom:0;
  @include px2rem(height, 260);
  background-color: #fee088;
  text-align: center;

  .picture-wrapper {
    @include px2rem(padding-top, 40);

    .picture {
      display: inline-block;
      @include bg-image('../img/banner4');
      @include px2rem(background-size, 599);
      @include px2rem(height, 93);
      @include px2rem(width, 599);
      background-repeat: no-repeat;
    }
  }

  .wrapper {
    @include px2rem(margin-top, 47);
    @include px2rem(width, 260);
    @include px2rem(height, 50);
    @include px2rem(line-height, 50);
    background-color: #db2f3f;
    @include px2rem(border-radius, 20);
    position: relative;
    left:50%;
    transform: translateX(-50%);

    .button {
      @include font-dpr(16px);
      color: #fff;
      @include px2rem(letter-spacing, 1);
    }
  }
}